---
import { Icon } from "astro-icon/components";
import I18nKey from "../i18n/i18nKey";
import { i18n } from "../i18n/translation";
import MainGridLayout from "../layouts/MainGridLayout.astro";

export const prerender = true;
---

<MainGridLayout title={i18n(I18nKey.notFound)} description={i18n(I18nKey.notFoundDescription)}>
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-96">
        <div class="card-base z-10 px-9 py-12 relative w-full flex flex-col items-center justify-center text-center">
            <!-- 404 大号数字 -->
            <div class="text-8xl md:text-9xl font-bold text-[var(--primary)] opacity-20 mb-4">
                {i18n(I18nKey.notFound)}
            </div>
            
            <!-- 404 图标 -->
            <div class="mb-6">
                <Icon name="material-symbols:error-outline" class="text-6xl text-[var(--primary)]" />
            </div>
            
            <!-- 标题 -->
            <h1 class="text-3xl md:text-4xl font-bold mb-4 text-90">
                {i18n(I18nKey.notFoundTitle)}
            </h1>
            
            <!-- 描述 -->
            <p class="text-lg text-75 mb-8 max-w-md">
                {i18n(I18nKey.notFoundDescription)}
            </p>
            
            <!-- 返回首页按钮 -->
            <a 
                href="/" 
                class="inline-flex items-center gap-2 px-6 py-3 bg-[var(--primary)] text-white rounded-[var(--radius-large)] hover:bg-[var(--primary-dark)] transition-colors duration-200 font-medium"
            >
                <Icon name="material-symbols:home" class="text-xl" />
                {i18n(I18nKey.backToHome)}
            </a>
            
            <!-- 装饰性元素 -->
            <div class="absolute top-4 left-4 opacity-10">
                <Icon name="material-symbols:sentiment-sad" class="text-4xl text-[var(--primary)]" />
            </div>
            <div class="absolute bottom-4 right-4 opacity-10">
                <Icon name="material-symbols:search-off" class="text-4xl text-[var(--primary)]" />
            </div>
        </div>
    </div>
</MainGridLayout>

<style>
    /* 添加一些动画效果 */
    .card-base {
        animation: fadeInUp 0.6s ease-out;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* 按钮悬停效果 */
    a:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
    }
</style>